<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>候车厅环境监测系统</title>
  <style>
    body {
      font-family: Arial, sans-serif;
      text-align: center;
      background-color: #f4f4f4;
    }

    #container {
      max-width: 600px;
      margin: 50px auto;
      padding: 20px;
      background-color: #fff;
      border-radius: 8px;
      box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
    }

    h1 {
      color: #333;
    }

    .sensor-data {
      margin: 20px 0;
      display: flex;
      justify-content: space-around;
      align-items: center;
    }

    input {
      padding: 8px;
      margin-bottom: 10px;
      width: 80px;
      text-align: center;
    }

    #alarm-btn {
      padding: 15px 30px;
      font-size: 16px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      color: #fff;
    }

    #alarm-btn.red {
      background-color: #ff4d4d;
    }

    #alarm-btn.green {
      background-color: #4caf50;
    }

    #window-btn {
      padding: 15px 30px;
      font-size: 16px;
      border: none;
      border-radius: 5px;
      cursor: pointer;
      color: #fff;
    }

    #window-btn.red {
      background-color: #ff4d4d;
    }

    #window-btn.green {
      background-color: #4caf50;
    }
  </style>
</head>
<body>
  <div id="container">
    <h1>候车厅环境监测系统</h1>
    
    <div class="sensor-data">
      <div>
        <p>温度</p>
        <span id="temperature">0 °C</span>
      </div>
      <div>
        <p>湿度</p>
        <span id="humidity">5%</span>
      </div>
      <div>
        <p>烟雾浓度</p>
        <span id="smoke">0.5 ppm</span>
      </div>
      <div>
        <p>光照强度</p>
        <span id="light">1000 lux</span>
      </div>
    </div>

    <div>
        <form id="sendtempThreshold">
            <label for="tempThreshold">温度阈值:</label>
            <input type="number" id="tempThreshold" name="tempThreshold" placeholder="e.g., 30°C" required>
            <button type="提交" onclick="send_tempThreshold()">Send</button>
        </form>

        <form id="sendsmokeThreshold">
            <label for="smokeThreshold">烟雾阈值:</label>
            <input type="number" id="smokeThreshold" name="smokeThreshold" placeholder="e.g., 0.5 ppm" required>
            <button type="提交" onclick="send_smokeThreshold()">Send</button>
        </form>

        <form id="sendlightThreshold">
            <label for="lightThreshold">光照强度阈值:</label>
            <input type="number" id="lightThreshold" name="lightThreshold" placeholder="e.g., 1000 lux" required>
            <button type="提交" onclick="send_lightThreshold()">Send</button>
        </form>
    </div>
    <button id="alarm-btn" class="green" onclick="toggleAlarm()">触发报警</button>
        
    <button id="window-btn" class="green" onclick="toggleWindow()">关闭窗户</button>
    <div>
        <button id="window-btn" class="green" onclick="change_info()">更新信息</button>
    </div>
        
  </div>

    <script>
        function send_tempThreshold() {
            // 获取消息输入框的值
            var tempThreshold = document.getElementById("tempThreshold").value;

            // 发送 Ajax 请求到后端
            fetch('/send_tempThreshold', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    message: tempThreshold
                }),
            })
            .then(response => response.json())
            .then(data => {
                // 显示发送成功的弹窗
                alert('温度阈值更新成功');
            })
            .catch((error) => {
                console.error('Error:', error);
            });
        }
        function send_smokeThreshold() {
            // 获取消息输入框的值
            var smokeThreshold = document.getElementById("smokeThreshold").value;

            // 发送 Ajax 请求到后端
            fetch('/send_smokeThreshold', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    message: smokeThreshold
                }),
            })
            .then(response => response.json())
            .then(data => {
                // 显示发送成功的弹窗
                alert('烟雾阈值更新成功');
            })
            .catch((error) => {
                console.error('Error:', error);
            });
        }
        function send_lightThreshold() {
            // 获取消息输入框的值
            var lightThreshold = document.getElementById("lightThreshold").value;

            // 发送 Ajax 请求到后端
            fetch('/send_lightThreshold', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({
                    message: lightThreshold
                }),
            })
            .then(response => response.json())
            .then(data => {
                // 显示发送成功的弹窗
                alert('光照强度阈值更新成功');
            })
            .catch((error) => {
                console.error('Error:', error);
            });
        }      
        function change_info() {
            // 添加 Ajax 请求发送报警
            fetch('/change_info', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({}),
            })
            .then(response => response.json())
            .then(data => {
                document.getElementById('temperature').innerText = data.temperature + ' °C';
                document.getElementById('humidity').innerText = data.humidity + ' %';
                document.getElementById('smoke').innerText = data.smoke + ' ppm';
                document.getElementById('light').innerText = data.light + ' lux';
            })
            .catch((error) => {
                console.error('Error:', error);
            });
        }
        function toggleAlarm() {
            // 添加 Ajax 请求发送报警
            fetch('/send_alarm', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({}),
            })
            .then(response => response.json())
            .then(data => {
                // 这里可以添加根据后端返回的数据更改按钮颜色的逻辑
                // 例如，如果 data.alarm 是 true，则更改按钮颜色
                document.getElementById('alarm-btn').style.backgroundColor = data.alarm ? 'red' : 'green';
            })
            .catch((error) => {
                console.error('Error:', error);
            });
        }
        function toggleWindow() {
        // 添加 Ajax 请求发送报警
        fetch('/send_window', {
                method: 'POST',
                headers: {
                    'Content-Type': 'application/json',
                },
                body: JSON.stringify({}),
            })
            .then(response => response.json())
            .then(data => {
                // 这里可以添加根据后端返回的数据更改按钮颜色的逻辑
                // 例如，如果 data.alarm 是 true，则更改按钮颜色
                document.getElementById('window-btn').style.backgroundColor = data.alarm ? 'red' : 'green';
            })
            .catch((error) => {
                console.error('Error:', error);
            });
        }
    </script>
</body>
</html>
